<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>论坛1101</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/iconfont.js"></script>
<style>
html,body{ padding:0; margin:0; border:0; width:100%; height:100%;}
body{
	font-family:"宋体";
	font-size: 14px;
	background:url(img/body-bg.png) fixed center no-repeat;
    background-size:cover;
}
.icon {
   width: 30px; height: 30px;
   vertical-align: -10px;
   fill: currentColor;
   overflow: hidden;
}

.login_body{ width:674px; height:488px; position:absolute; top:50%; margin-top:-244px; left:50%; margin-left:-337px; background:#fff;box-shadow:1px 1px 4px #767676;border-radius:4px; color:#666;}
.login_title{ text-align:center; height:60px; line-height:60px; font-size:22px; font-weight:700;}
.login_block{ width:100%;}
.box_left{ width:442px; float:left; overflow:auto; zoom:1; border-right:1px dashed #eee;}
.box_right{ width:231px;  float:left;}
.box_form{ width:320px; margin:0 auto;}
.box_form input{ width:280px; padding:12px 20px; transition:all,.2s; border:1px solid #dce4e6;border-radius:3px; outline:none; background:#f3f6f8;}
.box_form input:focus{ border-color:#31b968; background:#eef1f3}

.BBSloginone,.BBSlogintwo{ width:100%; text-align:center; padding:10px 0;  background:#31b968; color:#fff; font-size:20px; font-weight:500; border-radius:3px; cursor:pointer;}
.BBSloginone,.BBSlogintwo:hover{ background:#3bc372;}
.box_registered{ width:180px; margin:0 auto; color:#9F9F9F; font-weight:600;}
.box_registeredtop{ margin-top:20px;}
.registered{ font-weight:600; font-size:20px; margin:16px 0; cursor:pointer;}
.registered a{ color:#31b968; text-decoration:none;}
.registered a:hover{ color:#009E4C;}
.way{ width:100%; padding-top:12px;}
.way>div{ width:60px; height:50px; float:left;}
.icon_qq{width: 50px; height: 50px; color:#357EFF;}
.icon_qq:hover{cursor:pointer; color:#59AFFF;}

/*以下为tab样式*/
#tab {overflow:hidden;zoom:1; width:100%; height:40px;}
#tab>li {float:left;color:#9F9F9F; font-weight:bold; width:50%;height:40px; box-shadow:inset 0 -1px 0 0 #f0f0f0;	cursor:pointer;	line-height:40px; text-align:center;list-style: none;}
#tab>li.current {color:#31b968; background:#FFFFFF; box-shadow:inset 0 -1px 0 0 #31b968;}
#content {width: 100%;}
#content>li {width: 100%; display: none;}
.validation{width:110px; height:40px;float:right; color:#fff; font-weight:500;font-size:13px; cursor:pointer; background:#31b968; text-align:center; line-height:40px;border-radius:3px; border:1px solid #dce4e6;}
.validation_bg{ background:#f8f8f8; color:#888;width:110px; height:40px;float:right; font-size:13px; font-weight:500; cursor:pointer; text-align:center; line-height:40px;border-radius:3px; border:1px solid #dce4e6;}
.validation:hover{ background:#3bc372;}
.validation_sum{width:110px; height:42px;float:right; background:#FF7072;}
.prompt{ width:100%; height:20px; line-height:20px; font-size:13px; color:#e35b5a;}
.prompt span{display:none;}
</style>
</head>
<body>
    <div class="logo_box">
		<div class="login_body">
			<div class="login_title"></div>
			<div class="login_block">
            	<div class="box_left">
                	<div class="box_form">
                        <div id="tab">
                            <li class="current">
								<svg class="icon" aria-hidden="true">
                                  <use xlink:href="#icon-shouji"></use>
                                </svg>手机号注册
                            </li>
                            <li>
								<svg class="icon" aria-hidden="true">
                                  <use xlink:href="#icon-icon"></use>
                                </svg>邮箱注册
                            </li>
                        </div>
                        <div id="content">
                        	<li id="Mobile" style="width:100%;background:#fff;display:block;">
                            	<div style="margin:18px 0;">
                                    <input type="text" id="userNum" value="" placeholder="请输入手机号码">
                                    <div class="prompt"><span>请输入手机号码</span></div>
                                    <input type="text" id="userName" value="" placeholder="请输入用户名">
                                    <div class="prompt"><span>请输入用户名</span></div>
                                    <input type="password" id="userPassword" class="password" value="" placeholder="请输入密码">
                                    <div class="prompt"><span>请输入密码</span></div>
                                    <div style="width:100%; height:42px;">
                                        <div style="width:192px;float:left;">
                                        <input id="insert"  style="width:150px;" type="text" value="" placeholder="请输入短信验证码">
                                        </div>
                                        <div class="validation">
                                        <span>获取验证码</span>
                                        </div>
                                    </div>
                                    <div class="prompt"><span class="insert">请输入验证码</span></div>
                                </div>
                                <div class="BBSloginone">注册</div>                            
                            </li>
                            <li id="emal">
                            	<div style="margin:18px 0;">
                                    <input type="text" id="userNum" value="" placeholder="请输入邮箱">
                                    <div class="prompt"><span>请输入邮箱</span></div>
                                    <input type="text" id="userName" value="" placeholder="请输入用户名">
                                    <div class="prompt"><span>请输入用户名</span></div>
                                    <input type="password" id="userPassword" class="password" value="" placeholder="请输入密码">
                                    <div class="prompt"><span>请输入密码</span></div>
                                    <div style="width:100%; height:42px;">
                                        <div style="width:192px;float:left;">
                                        <input style="width:150px;" type="text" value="" placeholder="验证码">
                                        </div>
                                        <div class="validation_sum">
                                        
                                        </div>
                                    </div>
                                    <div class="prompt"><span class="inserttwo">请输入验证码</span></div>
                                </div>
                                <div class="BBSlogintwo">注册</div>  
                            </li>
                        </div>
                    	<script>
							$(function(){
								var $li = $('#tab>li'), $ul = $('#content>li');
								$li.click(function(){
									var $this = $(this), $t = $this.index();
										$li.removeClass();
										$this.addClass('current');
										$ul.css('display','none').eq($t).css('display','block');
								});
							});	
						</script>
                    </div>
                </div>
                <div class="box_right">
                	<div class="box_registered">
                    	<div class="box_registeredtop">没有账号？</div>
                        <div class="registered"><a href="登录页.html">直接登录 →</a></div>
                        <div>使用以下账号直接登录</div>
                        <div class="way">
							<div>
                            	<svg class="icon icon_qq" aria-hidden="true">
                                  <use xlink:href="#icon-chuanchengshejiiconzitihua03"></use>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> 
<script>
$(function(){
	$('.BBSloginone').click(function(){
		$.each($('#Mobile input'),function(i,n){
			if($.trim($(this).val())==''){
				$(this).css({'border':'1px solid #e35b5a'});
				 $(this).next().find('span').show() ;
				} else{
					$(this).next().find('span').hide() ;
					$(this).css({'border':'1px solid #dce4e6'});
					}
			});
			$.trim($('#insert').val()) ==''? $('span.insert').show() : $('span.insert').hide();
		});<!---------------------------------以上为手机号注册-->
	$('.BBSlogintwo').click(function(){
		$.each($('#emal input'),function(i,n){
			if($.trim($(this).val())==''){
				$(this).css({'border':'1px solid #e35b5a'});
				 $(this).next().find('span').show() ;
				} else{
					$(this).next().find('span').hide() ;
					$(this).css({'border':'1px solid #dce4e6'});
					}
			});
			$.trim($('#inserttwo').val()) ==''? $('span.inserttwo').show() : $('span.insert').hide();
		});<!---------------------------------以上为邮箱号注册-->
	});
</script>
</body>
</html>
